<template>
  <div>
      <headerMiddle title="我的关注"></headerMiddle>
      <div class="item" v-for="(item,index) in myFollows" :key="index">
          <!-- 用v-for来遍历数据 -->
          <img :src="item.head_img" alt="" class="avatar">
          <div class="itemMiddle">
              <div class="name">{{item.nickname}}</div>
              <div class="date">2019-10-05</div>
          </div>
          <div class="btnCancel" @click="cancelFollow(item.id)">取消关注</div>
      </div>
  </div>
</template>

<script>
import headerMiddle from '../components/headerMiddle';
export default {
    components:{
        headerMiddle
    },
    data(){
        return{
            myFollows:[]
        }
    },
    methods:{
        loadPage(){
            this.$axios({
            url:'/user_follows',
            method:'get',
            headers:{
                 Authorization: localStorage.getItem('token')
            }
        }).then(res=>{
            console.log(res.data);
            this.myFollows = res.data.data;
            // 这里不确定返回来的数据有没有头像,先遍历，处理好头像问题
            this.myFollows.forEach(e=>{
                if(!e.head_img){
                    e.head_img = '/static/jieni.jpg'
                }else{
                    e.head_img = this.$axios.defaults.baseURL + e.head_img
                }
            })
        })
        },
        cancelFollow(id){
        this.$axios({
            url:'/user_unfollow/' +id,
            method:'get',
            headers: {
                Authorization: localStorage.getItem("token")
            }
        }).then(res=>{
            console.log(res.data);
            this.loadPage();
        })
      }
    },
    mounted(){
        this.loadPage();
    }
}
</script>

<style lang="less" scoped>
    .item{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5.556vw;
        border-bottom: 1px solid #eeeeee;
    }
    .avatar{
        width: 11.111vw;
        border-radius: 5.556vw
    }
    .itemMiddle{
        flex: 1;
        text-align: left;
        padding-left: 2.778vw;
        .date{
            font-size: 14px;
            color: #888;
        }
    }
    .btnCancel{
        height: 8.333vw;
        line-height: 8.333vw;
        padding: 0 2.778vw;
        background: #eeeeee;
        border-radius: 4.167vw;
        color: #888;
        font-size: 14px;
    }
</style>